<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
        
        <title>Find Parent Documentation</title>
        
        <script src="/js/greyspots.js" type="text/javascript"></script>
        <link href="/css/greyspots.css" type="text/css" rel="stylesheet" />
        
        <script src="/js/ace/ace.js" data-ace-base="/js/ace/" type="text/javascript" charset="utf-8"></script>
        <script src="/js/ace/ext-language_tools.js" type="text/javascript"></script>
        <script src="/js/ace/ext-searchbox.js" type="text/javascript"></script>
        
        <script src="doc-library/doc.js" type="text/javascript"></script>
        <link href="doc-library/doc.css" type="text/css" rel="stylesheet" />
    </head>
    <body>
        <gs-jumbo>
            <h1 class="text-center">Find Parent</h1>
        </gs-jumbo>
            
        <gs-container min-width="sml;med;lrg">
            <h3>Functions:</h3>
            <pre><code>GS.findParentTag(&lt;ELEMENT-TO-SEARCH-FROM&gt;, &lt;TAG-NAME&gt;);
GS.findParentElement(&lt;ELEMENT-TO-SEARCH-FROM&gt;, &lt;SELECTOR|FUNCTION|ELEMENT&gt;);</code></pre>
            
            <h3>Description:</h3>
            <div class="doc-section">
                These functions are for finding a parent element of a specified element.
            </div>
            
            <h1>Examples:</h1>
            <div class="doc-example-description">
                <span class="h3">GS.findParentTag Example:</span><br />
                <p>This function finds a parent using the tag name. It loops through parents and stops when it finds the first element with the specified tag name. In this example you choose a tag to find using the select box and when you click the "Find Parent" button it will find the parent with that tag and put a CSS border on it.</p>
            </div>
            <gs-doc-example>
                <template for="html" height="22">
                    <gs-select id="find-tag">
                        <option value="div">Div (div)</option>
                        <option value="center">Center (center)</option>
                        <option value="span">Span (span)</option>
                    </gs-select>
                    <gs-button onclick="testFind()">Find Parent</gs-button>
                    <br>
                    <div id="parent-3">
                        <br />
                        <center id="parent-2">
                            <span id="parent-1">
                                <i id="target">target</i>
                            </span>
                        </center>
                        <br />
                    </div>
                </template>
                <template for="js" height="23">
                    function testFind() {
                        var match;
                        
                        clearPreviousFind();
                        
                        match = GS.findParentTag(document.getElementById('target'), document.getElementById('find-tag').value);
                        
                        match.style.border = '1px solid #000';
                    }
                    
                    function clearPreviousFind() {
                        document.getElementById('parent-3').style.border = '';
                        document.getElementById('parent-2').style.border = '';
                        document.getElementById('parent-1').style.border = '';
                    }
                </template>
            </gs-doc-example>
            
            
            <div class="doc-example-description">
                <span class="h3">GS.findParentElement Selector Example:</span><br />
                <p>In this example we use the GS.findParentElement function to find a parent using a selector. It loops through parents and stops when it finds the first element that the selector matches. In this example you choose an ID to find using the select box and when you click the "Find Parent" button it will find the parent with that ID and put a CSS border on it.</p>
            </div>
            <gs-doc-example>
                <template for="html" height="23">
                    <gs-select id="find-selector">
                        <option value="#parent-1">Div 1 (#parent-1)</option>
                        <option value="#parent-2">Div 2 (#parent-2)</option>
                        <option value="#parent-3">Div 3 (#parent-3)</option>
                    </gs-select>
                    <gs-button onclick="testFind()">Find Parent</gs-button>
                    <br>
                    <div id="parent-3">
                        Parent 3
                        <div id="parent-2">
                            Parent 2
                            <div id="parent-1">
                                Parent 1<br />
                                <i id="target">target</i>
                            </div>
                        </div>
                    </div>
                </template>
                <template for="js" height="23">
                    function testFind() {
                        var match;
                        
                        clearPreviousFind();
                        
                        match = GS.findParentElement(document.getElementById('target'), document.getElementById('find-selector').value);
                        
                        match.style.border = '1px solid #000';
                    }
                    
                    function clearPreviousFind() {
                        document.getElementById('parent-3').style.border = '';
                        document.getElementById('parent-2').style.border = '';
                        document.getElementById('parent-1').style.border = '';
                    }
                </template>
            </gs-doc-example>
            
            
            <div class="doc-example-description">
                <span class="h3">GS.findParentElement Function Example:</span><br />
                <p>In this example we use the GS.findParentElement function to find a parent using a provided function. It loops through parents and stops when the provided function returnes true. In this example when you click the "Find Parent" button the GS.findParentElement function will find the parent with that the function returns true on and put a CSS border on it.</p>
            </div>
            <gs-doc-example>
                <template for="html" height="18">
                    <gs-button onclick="testFind()">Find Parent</gs-button>
                    <br>
                    <div id="parent-3">
                        Parent 3
                        <div id="parent-2">
                            Parent 2
                            <div id="parent-1">
                                Parent 1<br />
                                <i id="target">target</i>
                            </div>
                        </div>
                    </div>
                </template>
                <template for="js" height="25">
                    function testFind() {
                        var match;
                        
                        clearPreviousFind();
                        
                        match = GS.findParentElement(document.getElementById('target'), function (element) {
                            return element.getAttribute('id') === 'parent-2';
                        });
                        
                        match.style.border = '1px solid #000';
                    }
                    
                    function clearPreviousFind() {
                        document.getElementById('parent-3').style.border = '';
                        document.getElementById('parent-2').style.border = '';
                        document.getElementById('parent-1').style.border = '';
                    }
                </template>
            </gs-doc-example>
            
            
            <div class="doc-example-description">
                <span class="h3">GS.findParentElement Element Example:</span><br />
                <p>In this example we aren't searching for a parent because we already have that element. We are searching to see if the target is a child of that element.</p>
            </div>
            <gs-doc-example>
                <template for="html" height="18">
                    <gs-button onclick="testFind()">Find Parent</gs-button>
                    <br>
                    <div id="parent-3">
                        Parent 3
                        <div id="parent-2">
                            Parent 2
                            <div id="parent-1">
                                Parent 1<br />
                                <i id="target">target</i>
                            </div>
                        </div>
                    </div>
                </template>
                <template for="js" height="15">
                    function testFind() {
                        var match = GS.findParentElement(
                                        document.getElementById('target'), 
                                        document.getElementById('parent-2')
                                    );
                        
                        if (match) {
                            alert('parent-2 is a parent of target');
                        }
                    }
                </template>
            </gs-doc-example>
        </gs-container>
    </body>
</html>